<template>
<h1>文本指令</h1>
<!--  插值指令：将页面显示的文本内容与响应式变量的值进行绑定-->
  <h1>我是第一个页面{{info}}</h1>
  <span>{{info}}</span>
  {{info+'下午好！'}}
  <hr>
  <button @click="f">点我</button>
  <p v-text="aaa"></p>
<!--  {{aaa}}是 v- text指令的简写形式，将响应式变量的值以文本的形式直接绑定到现实在页面上-->
  <p>{{aaa}}</p>
  <p v-html="aaa"></p>

</template>

<script setup>
import {ref} from "vue";
const info=ref('我是info')
const aaa=ref('我是aaa，展示<mark>高亮</mark>效果')
const f=()=>{
  console.log('点击了按钮')
  /*使用响应式变量的值 注意：在js中使用响应式变量的值，必须.value*/
  console.log(info.value)
  info.value='我是新值'
}
</script>


<style scoped>

</style>